<template>
  <div>
    <page-title title="已发起评审/订单详情" home-path="/sale/home"></page-title>
    <div class="pageMain">
      <div class="pageMain-body" style="height: calc(100vh - 125px);">
        <el-button-group style="display: flex; justify-content: center; margin-bottom: 20px;padding-top: 10px;">
          <el-button :type="activeTab === 'details' ? 'primary' : ''" size="small"
            @click="setActiveTab('details')">详情</el-button>
          <el-button :type="activeTab === 'workflow' ? 'primary' : ''" size="small"
            @click="setActiveTab('workflow')">流程</el-button>
        </el-button-group>
        <div v-if="activeTab === 'details'" >
          <div style="display: flex; margin-top: 30px">
            <div style="
            width: 50vw;
            display: flex;
            margin: auto;
            justify-content: space-between;
          ">
              <span>订单编号：{{ orderInfo.code }}</span>
              <span>提交时间：{{ orderInfo.submitTime }}</span>
              <span>评审类型：复评</span>
            </div>
          </div>
          <hr style="width: 70vw; margin: auto" />
          <div style="margin-top: 30px" >
            <order-detail :show-detail="false" :form-data="orderInfo" style="margin: auto" _width="600px"></order-detail>
          </div>
        </div>

        <!-- 流程内容 -->
        <div v-else>
          <Process :process-form="processForm"></Process>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/PageTitle.vue";
import OrderDetail from "@/components/OrderDetail.vue";
import Process from "@/components/Process.vue";
import { post } from "@/lib/Util.js";

import { getReviewedLeftList, technologicalProcessData } from "@/lib/Api.js";
export default {
  components: { PageTitle, OrderDetail, Process },
  data() {
    return {
      activeTab: "details", // 当前展示的标签，默认为 'details'
      orderInfo: {},
      tableData: [],
      orderDetails: {},
      superiorOpinion: "",
      id: "",
      processForm: {
        sale: "",
        standard: "",
        center: "",
        standardDepartment: "",
        file: ""
      }
    };
  },
  created() {
    this.id = this.$route.query.id;
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    //切换按钮
    setActiveTab(tab) {
      this.activeTab = tab; // 设置当前活动的标签
      if (tab == "workflow") {
        this.getWorkFlowData();
      }
    },
    getInfo() {
      let data = {
        contractInfoId: this.id
      };
      post(getReviewedLeftList, data).then(resp => {
        if (resp.code == 200) {
          this.orderInfo = resp.data;
        }
      });
    },
    getWorkFlowData() {
      let data = {
        contractInfoId: this.id
      };
      post(technologicalProcessData, data).then(res => {
        if (res.code === 200) {
          this.processForm = res.data;

          this.processForm.sale = res.data.flowInfoList.find(
            item => item.sequenceNo === 1
          );
          this.processForm.standard = res.data.flowInfoList.find(
            item => item.sequenceNo === 2
          );
          this.processForm.center = res.data.flowInfoList.find(
            item => item.sequenceNo === 3
          );
          this.processForm.standardDepartment = res.data.flowInfoList.find(
            item => item.sequenceNo === 4
          );
          this.processForm.file = res.data.flowInfoList.find(
            item => item.sequenceNo === 5
          );
        }
      });
    }
  }
};
</script>
<style scoped>
.title {
  color: white;
  display: flex;
  justify-content: space-between;
}

.form {
  width: 50%;
  margin: 0 auto;
}

.descriptions {
  width: 200px;
}

.btns {
  float: right;
}
</style>
